<template>
	
	<view class="zone">
		<!-- 辕门射戟 -->
		<u-navbar :is-back="false"  :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar">
					<u-icon class="back" size="20px" @click="$p.back()" name="arrow-left"></u-icon>
					<view class="title">
						<text class="one">辕门射戟</text>
						<view class="ci">
							<text>第</text>
							<view>1</view>
							<text>场</text>
						</view>
					</view>
				</view>
			</view>
		</u-navbar>

		<image class="play" @click="$p.navto('/pages/zhenyaota/shootplay')" src="http://img.cpgm.cc/panda/static/shoot/play.png" mode="widthFix" />

		<view class="main">
			<view class="flexbw">
				<view class="second">
					<text>180</text>
					<text>秒后比赛开始</text>
				</view>
				<view class="property">
					<image src="http://img.cpgm.cc/panda/static/shoot/sj.png" mode="widthFix" />
					<text>200</text>
				</view>
			</view>

			<!-- 右边部分 -->
			<view class="posabox">
				<view class="t_top">
					<view class="count">
						<p>近 <text>100场</text> <br> 环数统计</p>
					</view>
					<image src="http://img.cpgm.cc/panda/static/shoot/target.png" mode="widthFix" />
				</view>

				<view class="p_bot">
					<p>1环： <text>10</text>次</p>
					<p>2环： <text>10</text>次</p>
					<p>3环： <text>10</text>次</p>
					<p>4环： <text>10</text>次</p>
					<p>5环： <text>10</text>次</p>
					<p>1环： <text>10</text>次</p>
					<view class="button" @click="$p.navto('/pages/zhenyaota/shootlog')">我的记录 > </view>
				</view>
			</view>

			<view class="botbox">
				<scroll-view scroll-y>
					<!-- tab部分 -->
					<view class="tab">
						<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
							@click="tabchange(item.id)">{{item.name}}</view>
					</view>
					<p class="guss">猜中得5倍水晶</p>

					<view class="lsit">
						<view class="forbox " :class="[index == 1?'c_active':'']"  v-for="(item , index) in 5" :key="index">
							<text>1环</text>
							<image class="bazi" src="http://img.cpgm.cc/panda/static/shoot/bazi.png" mode="widthFix" />
							<view>
								<image src="http://img.cpgm.cc/panda/static/shoot/sj.png" mode="widthFix" />
								<text>20</text>
							</view>
						</view>
					</view>
					<view class="caibox">
						<view class="c_left">
							<image src="http://img.cpgm.cc/panda/static/shoot/sj.png" mode="widthFix" />
							<text>20</text>
						</view>
						<view class="button">竞猜</view>
					</view>
				</scroll-view>
			</view>
		</view>


		<!-- 结果弹窗 -->
		<u-mask :show="resultshow" @click="resultshow = false">
			<view class="warp">
				<view class="maskbox">
					<p class="title">命中5环</p>
					<image class="bazi" src="http://img.cpgm.cc/panda/static/shoot/1.png" mode="widthFix" />
					<p class="get">
						<text>猜击中环获得</text>
						<image src="http://img.cpgm.cc/panda/static/shoot/sj.png" mode="widthFix" />
						<text>10.00</text>
					</p>
					<p class="get">
						<text>猜没被击中环获得</text>
						<image src="http://img.cpgm.cc/panda/static/shoot/sj.png" mode="widthFix" />
						<text>10.00</text>
					</p>
					<p class="allget">
						<text>一共获得</text>
						<image src="http://img.cpgm.cc/panda/static/shoot/sj.png" mode="widthFix" />
						<text>10.00</text>
					</p>
				</view>
			</view>
		</u-mask>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					background: 'transparent'
				},
				tablist: [{
						id: 1,
						name: '中的几环'
					},
					{
						id: 2,
						name: '没中的环'
					}
				],
				stat: 1,
				resultshow:false,//结果弹窗
			};
		},
		async onLoad(){
			
		},
		methods: {
			tabchange(index){
				this.stat = index
			},
		},
	}
</script>

<style lang="less">
.zone {
	background: url('http://img.cpgm.cc/panda/static/shoot/bg2.png') no-repeat #EDE0F5;
	background-size: 100% auto;
	background-position: top;
	min-height: 100vh;
}

.title {
	display: flex;
	align-items: center;

	.one {
		font-size: 20px;
		margin-right: 10px;
	}
}

.main {
	padding: 10px 0 0 ;
}

.ci {
	display: flex;
	align-items: center;
	position: absolute;
	right: 25%;

	view {
		width: 16px;
		height: 16px;
		background: #FFFFFF;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FF3366;
		font-size: 16px;
		font-weight: 600;
	}
}

.second {
	width: fit-content;
	padding: 10px;
	background: #FFFFFF;
	box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.15);
	border-radius: 0 23px 23px 0 ;

	text:nth-child(1) {
		color: #FF3366;
		font-weight: 600;
		font-size: 22px;
		margin-right: 5px;
	}
	text:nth-child(2) {
		color: #333333;
		font-size: 18px;
	}
} 


.flexbw {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.property {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border-radius: 9px;
	padding: 0 10px 0 35px;

	image {
		width: 22px;
		position: absolute;
		left: 0;
	}
	text {
		color: #333333;
		font-size: 16px;
		font-weight: 600;
	}
}

.posabox {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
}
.t_top {
	display: flex;
	align-items: center;
	width: 33%;

	image {
		width: 55px;
	}
	view {
		background: #FEFAE7;
		box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.24), 0px 1px 3px 0px #FFFFFF;
		border-radius: 9px;
		padding: 10px;
		margin-right: -10px;

		p {
			color: #333333;
			font-size: 12px;
			font-weight: 600;
			text {
				color: #FF3366;
				font-size: 14px;
				font-weight: 600;
			}
		}
	}
}

.p_bot {
	width: 29%;
	background: linear-gradient(0deg, #FAE1FA, #FFFFFF, #FAECF8);
	box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.24), 0px 1px 3px 0px #FFFFFF;
	border-radius: 9px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 5px 10px 0 0;

	p {
		color: #333333;
		font-weight: 600;
		font-size: 14px;
		margin: 2px 0;

		text {
			color: #FF3366;
			font-size: 18px;
		}
	}

	.button {
		background: linear-gradient(180deg, #FF3366, #FF6666);
		box-shadow: 0px 1px 3px 0px #FF9999;
		border-radius: 9px;
		width: 95%;
		height: 32px;
		color: #fff;
	}
}

.botbox {
	position: fixed;
	width: 100%;
	bottom: 0;
	height: calc(100vh - 420px);
	background: linear-gradient(0deg, #FFDFC0, #EDE0F5);
	box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2), 0px 1px 0px 0px rgba(255,255,255,0.82);
	border-radius: 14px 14px 0 0;
	padding: 10px;
}



// tab导航
	.tab {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 5px;
		padding: 5px;
		border-radius: 7px;

		view {
			width: 48%;
			height: 42px;
			text-align: center;
			line-height: 42px;
			color: #333333;
			font-size: 13px;
			font-weight: 600;
			border-radius: 7px;
			background: #FFF0EC;
			border-radius: 14px;
		}
	}
	
	.active {
		color: #FFFFFF !important;
		background: linear-gradient(90deg, #FF3366, #FF499F) !important;
		box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.24), 0px 1px 1px 0px rgba(255,242,242,0.91) !important;
	}

	.guss {
		padding-left: 12%;
		color: #333333;
		font-size: 12px;
	}


	.lsit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}
	.forbox {
		width: 19%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: rgba(255,255,255,0.61);
		border: 1px solid #FFFFFF;
		border-radius: 9px;
		padding: 5px;

		text:nth-child(1) {
			color: #FF3366;
			font-size: 16px;
		}

		.bazi {
			width: 80%;
		}
		view {
			display: flex;
			align-items: center;
			image {
				width: 20px;
				margin-right: 5px;
			}
		}
	}

	.caibox{
		width: 100%;
		background: linear-gradient(90deg, #FAE1FA, #FAECF8, #FCE7EE, #FBEEEF);
		box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2), 0px 1px 1px 0px #FFFFFF;
		border-radius: 9px;
		padding: 12px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.button {
			background: linear-gradient(0deg,  #FF3366, #FF6666);
			box-shadow: 0px 1px 3px 0px #FF9999;
			border-radius: 9px;
			width: 90px;
			height: 40px;
			color: #fff;
		}
	}

	.c_left {
		width: fit-content;
		background: #FDF3EC;
		box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.24);
		border-radius: 14px;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 30px;
			margin-right: 5px;
		}
		text {
			font-size: 18px;
			font-weight: 600;
			color: #333333;
		}
	}

	

	// 结果弹窗
	.maskbox {
		background: linear-gradient(180deg, #FFCC99, #EDE0F5);
		box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.82);
		border-radius: 14px;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			color: #333333;
			font-size: 18px;
			font-weight: 600;
		}

		.bazi {
			width: 50%;
			margin: 20px 0;
		}

		.get {
			display: flex;
			align-items: center;

			image {
				width: 20px;
			}
		}

		.allget {
			display: flex;
			align-items: center;

			text {
				color: #FF3366;
				font-size: 18px;
				font-weight: 600;
			}
			image {
				width: 20px;
			}
		}
	}

	.play {
		position: absolute;
		top: 10px;	
		right: 10px;
		width: 45px;
		z-index: 999;
	}

	.c_active {
		background: linear-gradient(180deg, #FF9900, #FFCC66);
		border: 1px solid rgba(170,103,48,0.33);
		box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.3);
	}



</style>
